<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="学校名称">
            <span>{{ props.row.schoolName }}</span>
          </el-form-item>
          <el-form-item label="班级名称">
            <span>{{ props.row.className }}</span>
          </el-form-item>
          <el-form-item label="简单题">
            <span>{{ props.row.easyq }}</span>
          </el-form-item>
          <el-form-item label="中等题">
            <span>{{ props.row.centerq }}</span>
          </el-form-item>
          <el-form-item label="困难题">
            <span>{{ props.row.diffcq }}</span>
          </el-form-item>
          <el-form-item label="个性签名">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      type="index"
      label="榜单排名"
      width="150">
    </el-table-column>
    <el-table-column
      label="用户 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="命题数量"
      prop="number">
    </el-table-column>
    <el-table-column
      label="采纳率"
      prop="pass">
    </el-table-column>
    <el-table-column
      label="近期贡献"
      prop="recentques">
    </el-table-column>
  </el-table>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  export default {
    name:'shareList',
    data() {
      return {
        tableData: [{
          id: '淡淡的忧伤',
          number: 599,
          easyq:500,
          centerq:50,
          diffcq:49,
          pass:'65.5%',
          desc: '读万卷书，行万里路，赚万贯钱，做万人迷。',
          recentques:'两数之和',
          schoolName:'中南林业科技大学',
          className:'软件工程一班'
        }, {
          id: '舍我其谁？',
          name: '',
          number: 456,
          easyq:400,
          centerq:25,
          diffcq:31,
          pass:'62.7',
          category: '江浙小吃、小吃零食',
          desc: '傻与不傻，要看你会不会装傻',
          recentques:'两数之差',
          schoolName:'湖南农业大学',
          className:'电子信息工程2班'
        },
        {
          id: '就这',
          name: '',
          number: 420,
          easyq:370,
          centerq:30,
          diffcq:20,
          pass:'58.2',
          category: '江浙小吃、小吃零食',
          desc: '所谓敌人，不过是那些迫使我们自己变得强大的人。',
          recentques:'两数之差',
          schoolName:'长沙理工大学',
          className:'电子信息工程2班'
        }]
      }
    }
  }
</script>